<template>
  <div class="balanceWater_box">
    <!-- <my-header :showBack="true" title="交易大厅"  :showRight="true"  @rightAction="showPeopleProp" rightText="我的"  ></my-header> -->
    <div class="ass_top">
      <div class="head_top">
        <div>
          <i class="iconfont icon-fanhui menu" @click="goBack()"></i>
        </div>
        <div>{{$t("lang.Seedaccountequ")}}</div>
        <div class="rightmenu"
              @click="getPath"
              >
            {{$t("lang.Bill")}}
        </div>
      </div>
    <!-- <div class="all_ass">
      <h3>{{JifenNum||"0.00"}}</h3> 
      <p>{{$t("lang.UseStock")}}</p>
    </div> -->
    </div>
    <div class="asflex">
      <div>
        <h4>{{JifenNum||"0.00"}}</h4>
        <p>{{$t("lang.UseStock")}}</p>
      </div>
      <div>
        <h4>{{StaticMoney||"0.00"}}</h4>
        <p>{{$t("lang.StaticMoney")}}</p>
      </div>
    </div>
    <!-- 02 -->
    <div class="asflex">
      <div>
        <h4>{{DQNum||"0.00"}}</h4>
        <p>{{$t("lang.FixedStock")}}</p>
      </div>
      <div>
        <h4>{{PSNum||"0.00"}}</h4>
        <p>{{$t("lang.DeliveryStock")}}</p>
      </div>
    </div>
    <!-- 交易输入框 -->
    <section class="">
      <div class="personal_info">
        <van-cell-group>
          <van-field v-model="shizhi"   :label="$t('lang.shareprice')"  clearable  disabled/>
          <van-field v-model="sellgrade" :label="$t('lang.Sellquantity')"  :placeholder="$t('lang.forsaleNum')" clearable/>
          <van-field v-model="ltjf"      :label="$t('lang.circulationpoints')" clearable  disabled/>
          <van-field v-model="payPass"    :label="$t('lang.scccPword')"  :placeholder="$t('lang.enterSpword')"  type="password" clearable />        
        </van-cell-group>
      </div>
        <div class="center_btn">
          <van-button type="primary" size="large" @click="confirm">{{$t("lang.usellBtns")}}</van-button>
        </div> 
    </section>
    <!-- 左侧侧滑菜单 -->
    <van-popup v-model="showLeftProp" position="left" :overlay="true" class="leftprop_box">
      <right-menu></right-menu>
    </van-popup>
  </div>
</template>

<script>
import header from '@/components/header'
import timeFormat from '../../store/timeFormat';
import chart from "@/components/chart.vue";
import { Toast } from 'vant';
import RightMenu from "./RightMenu.vue";
export default {
  components: {
		'my-header': header,
    "tfc-chart": chart,
    "right-menu":RightMenu,
  },
  data() {
    return {
      selected: "income",
      searchCondition: {  //分页属性  
        pageNo: 1,  //当前页
        pageSize: 20,//每页20条
        type: 1,
        status: 1
      },

      loading:false,
      finished:true,
      showLeftProp: false,
      incomeTotal:0,
      newsList:[ ],
      disabledInput:false,
      DayNum:"",
      shizhi:"",
      sellgrade:"",
      ltjf:"0.00",
      payPass:"",
      JifenNum:"",
      DQNum:"",
      PSNum:"",
      StaticMoney:"",
			ProChildId:"",
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return timeFormat.formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  mounted () {
		// 获取路由ID
		this.ProChildId=this.$route.params.id;
    console.log(this.id);
    this.selectAccount();
    this.selectMarket();
    console.log(this)
  },
  created() {
    
  },
  watch: {
    sellgrade(){
      this.ltjf= parseFloat(Number(this.DayNum)*Number(this.sellgrade))*Number(0.75).toFixed(4);
    },
  },
  methods: {
    selectMarket(){
      //今日市值
      this.$ajax(this.$api.selectMarket).then(res=>{
          if(res.code==0){
            this.marketValue  = res.msg;
            this.DayNum=res.msg.dollarRate;
            this.shizhi="$"+this.DayNum;
          }
      })
    },
    // 跳转到子账单
    getPath(){
      //alert(this.$route.params.id)
      this.$router.push({path:"/Sonbill",query:{id:this.$route.params.id}})
    },
		showProp(){
      this.showLeftProp=true;
      console.log(1001);
    },
    closeProp(){
      this.showLeftProp=false;
    },
    confirm(){
      // 卖出
      if (this.sellgrade=='' || this.sellgrade<0 ) {
        Toast({ message: this.$t('lang.EnterTrueNum'), position: "bottom" });
        return;
      }
      if (this.payPass=='') {
        Toast({ message:  this.$t('lang.enterSpword'), position: "bottom" });
        return;
      }
      if (!this.$validator.isPassword(this.payPass)) {
        Toast({ message: this.$t('lang.truepayPass'), position: "bottom" });
        return;
			}
			// 种子账号传2
      this.$ajax(this.$api.saleStock,{amount:this.sellgrade,payPass:this.payPass,type:2,childId:this.ProChildId}).then(res => {
        if (res.code === 0 && res.msg) {
          Toast({message: res.msg,position: "bottom"});
          console.log(this.TradinfoList);
          this.sellgrade="";
          this.payPass="";
          this.selectAccount();
        }else{
          Toast({message: res.msg,position: "bottom"});
          return 
        }
      });
    },
    getIntData(item){
      const buyId=item.id;
      this.$ajax(this.$api.matchTrade,{id:buyId}).then(res => {
        if (res.code === 0 && res.msg) {
          Toast({message: res.msg,position: "bottom"});
          console.log(this.TradinfoList);
        }else{
          Toast({message: res.msg,position: "bottom"});
          return 
        }
      });
    },
    selectAccount(){
      // 种子账号资产POST /api/child/selectChild
      this.$ajax(this.$api.selectChild,{id:this.ProChildId}).then(
        res=>{
          if(res.code==0){
            // 可用股权
            this.JifenNum=res.msg.useStock.toFixed(3);
            this.DQNum=res.msg.fixedStock.toFixed(3);
            this.PSNum=res.msg.deliveryStock.toFixed(3);
            this.StaticMoney=res.msg.staticMoney.toFixed(3);
          }
        }
      )
    },
    See (e) {
        window.location.href = e
    }
  }
}
</script>

<style lang='less' scoped>
.balanceWater_box {
  background: #ffffff;color: #999999;
}
.bottop{border-top: 1px solid #eeeeee;margin-bottom: 50px;}
// head_top
.head_top{
	width: 100%;
  height: 44px;
	line-height: 44px;
  font-size: 16px;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: transparent;      
}
.head_top .menu{font-size: 20px;}
.head_top i{
  padding:10px;
  font-size: 14px;
}
.head_top div:nth-child(1) {
  width:20%;
  box-sizing: border-box;
}
.head_top div:nth-child(2) {
  width:60%;
  text-align:center;
}
.head_top div:nth-child(3) {
  width:20%;
  text-align:center;
  font-size:12px;
}
// .head_top + div {
//   position: absolute;
//   width: 100%;
//   top: 44px;
//   bottom: 0;
//   overflow-y: auto;
//   overflow-x: hidden;
// }
.top_jybg{
	background:linear-gradient(150deg,rgba(172,6,0,1) 0%,rgba(135,2,0,1) 100%);
	border-radius:2px;height: 100px;
	color: #ffffff;
	padding-left: 15px;
	box-sizing: border-box;
	margin: 12px;
	h2{font-weight:bold;font-size: 30px;padding-top: 15px;}
}
.trad_list{
	background: #f6f6f6;
	li{
		box-sizing: border-box;padding:0 12px;background:#ffffff;margin-top:10px;
		h4{color: #333333;}
		.nflex{display: flex;justify-content:space-between ;}
		.nborder{border-top: 1px solid #F6F6F6;border-bottom: 1px solid #F6F6F6;
      p{line-height: 26px;color: #999999;}
      p:nth-child(2){color: #666666;}
		}
		.npadd{padding: 15px 0;}
		.buybtn{color: #FF4954;border: 1px solid #FF4954;border-radius: 20px;padding: 0 6px ;}	
	}
}
// prop层
.showmenu{
  text-align: center;color: #333333;background:transparent;height: 200px;position:relative;
  li{height: 35px;line-height: 35px;border-bottom: 1px solid #eeeeee;}
  li:nth-child(2){border-bottom: none;}
}
.test_triangle_border{
    width:200px; 
    margin:0 auto 20px;
    
}
.test_triangle_border a{
    color:#333;
    font-weight:bold; 
    text-decoration:none;
}
.test_triangle_border .popup{
    width:120px;
    background:#ffffff; 
    // padding:10px 20px; 
    color:#333;  
    border-radius:4px;
    position:absolute; 
    top:10px; 
    right:2vw;
    border:1px solid #333;
}
.test_triangle_border .popup span{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #333; 
    position:absolute; 
    top:-10px; 
    left:70%;/* 三角形居中显示 */
    margin-left:-10px;/* 三角形居中显示 */
}
.test_triangle_border .popup em{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #ffffff; 
    position:absolute; 
    top:1px; 
    left:-10px;
}
//top
.ass_top{background: url(../../assets/img/assetIndex/grzx_dhzx.png)}
.all_ass{
  text-align: center;padding:4vh 0;
  h3{color: #E1AF56;font-size: 24px;line-height: 30px;}
  p{color: #AA7A24;}
}
.asflex{display: flex;justify-content:space-between ;background:#720300;padding:10px 0;
  div{width: 50%;text-align: center;}
  h4{color: #E1AF56;font-size: 16px;line-height: 20px;}
  p{color: #AA7A24;}
}
// 交易输入框
.center_btn{margin: 15px;}
.center_btn .btn{
  width:80%;
  background: #A00500;
  margin-top:50px;
  margin-left: 10%;
  box-shadow: none;
  border-radius: 5px;
  color:#fff;
  font-size:16px;
}
// leftmenu prop
.leftprop_box{background: #ffffff;width:80vw;height: 100%;}
.leftprop_box h3{padding-left: 14px;font-weight: 600;}
.leftprop_title{height: 65px;line-height: 65px;border-bottom: 1px solid #eeeeee;}
.homeleft_list li{display: flex; justify-content: space-between ;align-items:center; height: 50px;line-height: 50px;padding: 0 12px;color: #333333;}
.homeleft_list li div{display: flex;align-items:center; }
.homeleft_list li img{width: 25px;height: 25px;}
.homeleft_list li p{padding-left: 10px;}
</style>
